<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width-device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>tailwindcss 实践</title>
</head>
<body class="text-gray-800">
 
    
    
    <div class="w-[428px] bg-white rounded-xl shadow-lg overflow-hidden p-5">
         
        <!-- 标题区域 -->
        <header class="mb-5">
            <h1 class="text-xl font-bold text-primary">
                <i class="fas fa-calendar-alt mr-2"></i> 未来30天预报
            </h1>
        </header>
        
        <!-- 天气预报摘要 -->
        <div class="bg-blue-50 rounded-lg p-3 mb-5 border-l-4 border-blue-500">
            <p class="text-sm">
                未来30天将有<span class=" font-bold">16天</span>下雨，有<span class=" font-bold">1天</span>温度超过35°，最高温<span class=" font-bold">36°</span>（09月15日），最低温<span class=" font-bold">14°</span>（09月29日，09月30日，10月01日）。
            </p>
        </div>
        
        <!-- 卫星云图区域 -->
        <div class="bg-gray-800 rounded-lg p-3 text-white mb-5 relative">
            <!-- 云图背景效果 -->
            <div class="absolute inset-0 bg-gradient-to-b  to-gray-900 opacity-90 rounded-lg"></div>
            
            <!-- 云朵装饰 -->
            
            
            <h2 class="text-base text-blue-200 mb-1 relative z-10">
                <i class="fas fa-satellite mr-2"></i> 全球实时卫星云图
            </h2>
            <h3 class="text-sm text-blue-300 relative z-10">看看你头顶的云 飘到哪里去了</h3>
        </div>
        
       
        
        </div>
    </div>
    
</body>
</html>